---
title: Checkbox
description: Checkboxes provide the same functionality as native HTML checkboxes, without any of the styling, giving you a clean slate to design them however you'd like.
author:
  name: imskyleen
  url: https://github.com/imskyleen
releaseDate: 2025-09-07
---

<ComponentPreview name="demo-primitives-headless-checkbox" />

## Installation

<ComponentInstallation name="primitives-headless-checkbox" />

## Usage

```tsx
<Checkbox>
  <CheckboxIndicator />
</Checkbox>
```

## API Reference

### Checkbox

<ExternalLink
  href="https://headlessui.com/react/checkbox#checkbox"
  text="Headless UI API Reference - Checkbox"
/>

<TypeTable
  type={{
    '...props': {
      description: 'The props of the checkbox.',
      type: 'HTMLMotionProps<"button">',
      required: false,
    },
  }}
/>

### CheckboxIndicator

<TypeTable
  type={{
    '...props': {
      description: 'The props of the checkbox indicator.',
      type: 'SVGMotionProps<SVGSVGElement>',
      required: false,
    },
  }}
/>

## Credits

- [Headless Checkbox](https://headlessui.com/react/checkbox)
